<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')
		canvas.width = 550;
		canvas.height = 400;

		cxt.shadowOffsetX = -5;
		cxt.shadowOffsetY = -5;
		cxt.shadowColor = 'lightskyblue';
		cxt.shadowBlur = 1;
		cxt.fillStyle = 'hotpink';
		cxt.fillRect(30, 30, 50, 50)
		
		cxt.shadowOffsetX = 5;
		cxt.shadowOffsetY = 5;
		cxt.shadowColor = 'lightskyblue';
		cxt.shadowBlur = 10;
		cxt.fillStyle = 'hotpink';
		cxt.fillRect(130, 30, 50, 50)
	</script>

</html>